<!--  -->
<template>
  <el-card>
    <template #header>
      权限列表
    </template>
    <el-form
      ref="formRef"
      :inline="true"
      :model="userForm"
    >
      <el-form-item
        prop="type"
        label="权限"
      >
        <el-select
          v-model="userForm.type"
          clearable
          placeholder=" "
        >
          <el-option
            v-for="(value, key) in roleUserLevelEnum"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        prop="func"
        label="功能权限"
      >
        <el-cascader
          v-model="userForm.func"
          :options="options"
          :props="{ multiple: true }"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="PermissionAuth('see', btnAuth)"
          @click="onSubmit"
        >查询</el-button>
        <el-button
          type="primary"
          :disabled="PermissionAuth('see', btnAuth)"
          @click="resetForm(formRef)"
        >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElCascader } from 'element-plus';
import { roleUserLevelEnum } from '~/src/enum';
import { useRoute } from 'vue-router';
import { PermissionAuth } from '@/utils';
const { btnAuth } = useRoute().meta as AuthRoute.MetaProps;

const emit = defineEmits(['getFilmsList']);
const formRef = ref<FormInstance>();

const userForm = reactive({
  userName: undefined,
  type: undefined,
  func: undefined
});

const onSubmit = () => {
  emit('getFilmsList', userForm);
};
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency'
          },
          {
            value: 'feedback',
            label: 'Feedback'
          },
          {
            value: 'efficiency',
            label: 'Efficiency'
          },
          {
            value: 'controllability',
            label: 'Controllability'
          }
        ]
      }
    ]
  }, {
    value: 'form',
    label: 'Form',
    children: [
      {
        value: 'radio',
        label: 'Radio'
      },
      {
        value: 'checkbox',
        label: 'Checkbox'
      },
      {
        value: 'input',
        label: 'Input'
      },
      {
        value: 'input-number',
        label: 'InputNumber'
      },
      {
        value: 'select',
        label: 'Select'
      },
      {
        value: 'cascader',
        label: 'Cascader'
      },
      {
        value: 'switch',
        label: 'Switch'
      }
    ]
  }
];
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  emit('getFilmsList');
};
</script>

<style lang="scss" scoped></style>
